/* form */
.form_box {position: relative;}
.form_box .form_Item_box { padding: 5px 0; width: 100%; position: relative;}

/* form Item box */
.form_box .form_lable { width: 100px; text-align: right; line-height: 35px; font-size: 15px; color: #666; float: left;} 
.form_box .form_error { line-height: 35px; font-size: 15px;color: #f00; height: 35px; top: 5px; float: left; }
.form_box .form_item_layout {  float: left; margin: 0 10px; position: relative;}
.form_box .form_annotate { font-size: 12px; color: #999; margin: 0 0 0 110px; line-height: 23px; }

/* form type */
.form_box .normal .form_item_layout {width: 250px;}
.form_box .middle .form_item_layout {width: 350px;}
.form_box .block .form_item_layout {width: 550px;}
.form_box .block .form_error { float: none; margin-left: 110px; clear: both}

/* input */
.form_input { width:100%;outline: none; padding: 0px; margin: 0px; height: 33px; line-height: 33px; border: 1px solid #ccc; border-radius: 3px; color: #666; }
.form_input:focus { border-color: #66afe9 }
.form_input.normal{width: 250px;}
.form_input.middle{width: 350px;}
.form_input.block{width: 550px;}

/* input error */
.form_box .form_error_type .form_input { border-color: #f00;color: #f00}

/* select */
.form_select { width: 100%; height: 35px; position: relative;}
.form_select.normal{width: 250px;}
.form_select.middle{width: 350px;}
.form_select.block{width: 550px;}
.form_select .form_select_nameBox { width: 100%; height: 33px; line-height: 33px; color: #666; position: relative;  background: #fff;  border: 1px solid #ccc; border-radius: 3px;}
.form_select .form_select_name { position: absolute;top: 0px; left: 5px; bottom: 0px; right: 33px; line-height: 33px; font-size: 14px; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 13px;}
.form_select .form_select_nameBox span { position: absolute; display: block; top: 0px; width: 33px; right: 0px; height: 33px; background:url(../img/input.png) no-repeat -3px -0px;  }
.form_select.active .form_select_nameBox{ border-color:#70b4ea !important;}
.form_select.active .form_select_nameBox span { background-position: -3px -105px !important; }
/* .form_select.active .form_select_name { color: #666 !important; } */
.form_select .form_select_optionBox { display: none; position: absolute; top: 33px; z-index: 999; background: #fff; left: 0px; right: -2px; border: 1px solid #70b4ea; border-radius: 0 0 3px 3px;  max-height: 300px; overflow-y: auto;}
.form_select .form_select_option { height: 25px; line-height: 25px; font-size: 13px; padding: 0 5px; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 13px; color: #666;}
.form_select .form_select_option:hover { background: #70b4ea;color: #fff; }
.form_select .form_select_option.active { background: #1e90ff;color: #fff; }

/* select error */
.form_box .form_error_type .form_select_nameBox{ border-color: #f00 }
.form_box .form_error_type .form_select_name { color: #f00 }
.form_box .form_error_type .form_select_nameBox span { background-position: -3px -210px; }

/* input date */
.form_inputDate { width: 100%; height: 35px; position: relative;}
.form_inputDate.normal{width: 250px;}
.form_inputDate.middle{width: 350px;}
.form_inputDate.block{width: 550px;}
.form_inputDate .form_inputDate_valueBox { width: 100%; height: 33px; line-height: 33px; color: #666; position: relative;  background: #fff;  border: 1px solid #ccc; border-radius: 3px;}
.form_inputDate .form_inputDate_valueBox span { position: absolute; display: block; top: 0px; width: 33px; right: 0px; height: 33px; background:url(../img/input.png) no-repeat -5px -177px;  }
.form_inputDate .form_inputDate_value { position: absolute;border: none; margin: 0px; padding:  0px; color: #666; top: 0px; left: 5px; bottom: 0px; right: 33px; line-height: 33px; height: 33px; display: block; font-size: 14px; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 13px;}
.form_inputDate.active .form_inputDate_valueBox{ border-color:#70b4ea !important;}
.form_inputDate.active .form_inputDate_valueBox span { background-position: -5px -246px !important; }
.form_inputDate.active .form_inputDate_value { color: #666 !important; }
.form_inputDate .form_inputDate_dateBox { display: none; position: absolute; top: 33px; z-index: 3; background: #fff; right: -2px; border: 1px solid #70b4ea; border-radius: 0 0 3px 3px; height: 173px; width: 250px; overflow-y: auto;}
.form_inputDate .form_calendar {position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; overflow: hidden;}
.form_inputDate .form_calendar_conteoller {position: absolute; top: 0px; left: 0px; height: 24px; line-height: 24px; right: 0px;}
.form_inputDate .form_calendar_select { position: absolute; top: 0px; left: 0px; width: 92px; height: 22px; line-height: 22px; font-size: 12px; color: #666; cursor: pointer; border: 1px solid #fff; }
.form_inputDate .form_calendar_selectName { position: absolute; left: 3px; }
.form_inputDate .form_calendar_selectIcon { position: absolute; top: 0px; right: 0px; width: 22px; height: 22px; background:url(../img/input.png) no-repeat -7px -6px;}
.form_inputDate .form_calendar_buttons { height: 24px; width: 75px; position: absolute; top: 0px; right: 0px; }
.form_inputDate .form_calendar_button { width: 22px; height: 22px; position: absolute; top: 0px; border: 1px solid #ccc; border-radius: 3px; background:url(../img/input.png) no-repeat; cursor: pointer;}
.form_inputDate .form_calendar_pre { background-position: -7px -286px; }
.form_inputDate .form_calendar_today { background-position: -7px -356px; left: 25px;}
.form_inputDate .form_calendar_next { background-position: -7px -321px; left: 50px; }
.form_inputDate .form_calendar_yearlist,.form_inputDate .form_calendar_dayslist { top: 30px; position: absolute; left: 0px; right: 0px;border: 1px solid #ccc;bottom :0px; display: block; } 
.form_inputDate .form_calendar_daysTitle {height: 22px; line-height: 22px; font-size: 12px; color: #666; border-bottom: 1px solid #ccc; background: #eaeaea; }
.form_inputDate .form_calendar_weeks { width: 34px; float: left; text-align: center; }
.form_inputDate .form_calendar_daysBody { height:108px; background: #fff; }
.form_inputDate .form_calendar_day { height: 16px; width: 32px; float: left; color: #666; font-size: 12px; line-height: 16px; text-align: center; border: 1px solid #fff; border-radius: 3px; cursor: pointer; } 
.form_inputDate .form_calendar_day:hover { border-color: #ccc; }
.form_inputDate .form_calendar_day.today { border-color: #70b4ea; color: #70b4ea; }
.form_inputDate .form_calendar_day.active { border-color: #70b4ea; background:#70b4ea; color: #fff; }
.form_inputDate .form_calendar_day.empty { border-color: #fff; color: #fff; cursor:initial }
.form_inputDate .form_calendar_yearlist { display: none; overflow-y: auto; }
.form_inputDate .form_calendar_yearItem { height: 22px; border: 1px solid #ccc; border-width: 1px 0; margin: -1px 0; background: #eaeaea; color: #666; font-size: 12px; padding-left: 10px; line-height: 22px; cursor: pointer; }
.form_inputDate .form_calendar_monthItem { height: 30px; line-height: 30px; font-size: 13px; text-align: center; width: 25%; float: left; color: #666; width: 54px; border: 1px solid #ccc; border-width: 1px 1px 0 1px; margin: 0 0 -1px -1px; cursor: pointer; }

/* select error */
.form_box .form_error_type .form_inputDate_valueBox{ border-color: #f00 }
.form_box .form_error_type .form_inputDate_value { color: #f00 }
.form_box .form_error_type .form_inputDate_valueBox span { background-position: -5px -387px; }


.form_checkBox.normal{width: 230px;}
.form_checkBox.middle{width: 330px;}
.form_checkBox.block{width: 530px;}
.form_box .normal .form_checkBox {width: 230px;}
.form_box .middle .form_checkBox {width: 330px;}
.form_box .block .form_checkBox {width: 530px;}

/* checkItem */
.form_checkBox_Item { padding-right: 10px; line-height: 35px; display: inline-block;}
.form_checkBox_Item .form_checkBox_choose {float: left;  display: block; width: 35px; height: 35px; background-image: url(../img/radio.png); background-position: 10px 10px; }
.form_checkBox_Item .form_checkBox_choose.active {background-position: 10px -190px;}
.form_checkBox_Item.disable .form_checkBox_choose.active  {background-position: 10px -90px;}
.form_checkBox_Item .form_checkBox_name { float: left; font-size: 13px; color: #333; }
.form_checkBox_Item.disable .form_checkBox_name { color: #999; }

/* radio */
.form_radio.normal{width: 230px;}
.form_radio.middle{width: 330px;}
.form_radio.block{width: 530px;}
.form_box .normal .form_radio {width: 230px;}
.form_box .middle .form_radio {width: 330px;}
.form_box .block .form_radio {width: 530px;}

.form_radioItem_layout { position: absolute; left: 110px; width: 250px;  }
.form_radio_Item { padding-right: 10px; line-height: 35px; display: inline-block;}
.form_radio_Item .form_radio_choose {float: left;  display: block; width: 35px; height: 35px; background-image: url(../img/radio.png); background-position: -90px 10px; }
.form_radio_Item .form_radio_choose.active {background-position: -90px -190px;}
.form_radio_Item.disable .form_radio_choose.active  {background-position: -90px -90px;}
.form_radio_Item .form_radio_name { float: left; font-size: 13px; color: #333; }
.form_radio_Item.disable .form_radio_name { color: #999; }

/* textatea */
.form_textarea {resize: none; padding: 4px;font-family: "Microsoft YaHei", Verdana, Geneva, sans-serif;  outline: 0; margin: 0px; height: 150px; line-height: 25px; border: 1px solid #ccc; border-radius: 3px; color: #666; display: block; background: #fff;  }
.form_textarea:focus { border-color: #66afe9 }
.form_textarea.normal{width: 242px;}
.form_textarea.middle{width: 342px;}
.form_textarea.block{width: 542px;}
.form_box .normal .form_textarea {width: 242px;}
.form_box .middle .form_textarea {width: 342px;}
.form_box .block .form_textarea {width: 542px;}
/* input error */
.form_box .form_error_type .form_textarea { border-color: #f00;color: #f00}

/* input Select */
.form_inputSelect { width: 100%; height: 35px; position: relative;}
.form_inputSelect.normal{width: 250px;}
.form_inputSelect.middle{width: 350px;}
.form_inputSelect.block{width: 550px;}
.form_inputSelect .form_inputSelect_valueBox { width: 100%; height: 33px; line-height: 33px; color: #666; position: relative;  background: #fff;  border: 1px solid #ccc; border-radius: 3px;}
.form_inputSelect .form_inputSelect_valueBox span { position: absolute; display: block; top: 0px; width: 33px; right: 0px; height: 33px; background:url(../img/input.png) no-repeat -3px -0px;  }
.form_inputSelect .form_inputSelect_value { position: absolute;border: none; margin: 0px; padding:  0px; color: #666; top: 0px; left: 5px; bottom: 0px; right: 33px; line-height: 33px; height: 33px; display: block; font-size: 14px; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 13px;}
.form_inputSelect.active .form_inputSelect_valueBox{ border-color:#70b4ea !important;}
.form_inputSelect.active .form_inputSelect_valueBox span { background-position: -3px -105px !important; }
.form_inputSelect.active .form_inputSelect_value { color: #666 !important; }

.form_inputSelect .form_inputSelect_optionBox { display: none; position: absolute; top: 33px; z-index: 3; background: #fff; left: 0px; right: -2px; border: 1px solid #70b4ea; border-radius: 0 0 3px 3px;  max-height: 300px; overflow-y: auto;}
.form_inputSelect .form_inputSelect_option { height: 25px; line-height: 25px; font-size: 13px; padding: 0 5px; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 13px; color: #666;}
.form_inputSelect .form_inputSelect_option:hover { background: #70b4ea;color: #fff; }
.form_inputSelect .form_inputSelect_option.active { background: #1e90ff;color: #fff; }

/* select error */
.form_box .form_error_type .form_inputSelect_valueBox{ border-color: #f00 }
.form_box .form_error_type .form_inputSelect_value { color: #f00 }
.form_box .form_error_type .form_inputSelect_valueBox span { background-position: -3px -210px;  }





/* file-multiple */

.form_box .normal .form_file_multiple {width: 230px;}
.form_box .middle .form_file_multiple {width: 330px;}
.form_box .block .form_file_multiple {width: 530px;}

.form_file_multiple.normal{width: 230px;}
.form_file_multiple.middle{width: 330px;}
.form_file_multiple.block{width: 530px;}
.form_file_multiple .form_file_multiple_upload_button { position: relative;width: 100%; line-height: 30px; height: 30px; border: 1px solid #ccc; text-align: center; color: #666; font-size: 14px; border-radius: 3px;}
.form_file_multiple .form_file_multiple_upload_button input { position: absolute; top: 0px; left: 0px; display: block; width: 100%; height: 30px; opacity: 0; filter: alpha(opacity=0);cursor: pointer;}
.form_file_multiple .form_file_multiple_upload_button form { position: absolute; top: 0px; left: 0px; display: block; width: 100%; height: 30px;}
.form_file_multiple .form_file_multiple_upload_item { position: relative; height: 20px; line-height: 20px; margin: 4px 0 5px 0; border-bottom: 1px dotted #ccc;}
.form_file_multiple .form_file_multiple_upload_item_name { position: absolute; height: 20px; line-height: 20px; color: #666; left: 10px; right: 60px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.form_file_multiple .form_file_multiple_upload_item_delete {position: absolute; width: 50px; text-align: right; font-size: 14px; line-height: 20px; color: #1e90ff; text-decoration: underline; cursor: pointer; right: 8px; top: 0px; }

/* file-single */

.form_file_single { position: relative;  width: 150px; height: 150px;}
.form_file_single .form_file_single_image { width: 150px; height: 150px;}
.form_file_single .form_file_single_image img { width: 150px; height: 150px;}
.form_file_single .form_file_single_upload_button { position: absolute; width: 150px; height: 150px; top: 0px; left: 0px; overflow: hidden; cursor: pointer;}
.form_file_single .form_file_single_upload_button span { display: block; width: 70px; height: 25px; text-align: center; line-height: 25px; color: #666; background: #f0f0f0; border-radius: 3px; border: 1px solid #ccc; position: absolute; top: -50%; left: 50%; margin: -15px 0 0 -35px; font-size: 12px; } 
.form_file_single .form_file_single_upload_button:hover span { top: 50%;}
.form_file_single .form_file_single_upload_button form { position: absolute; top: 0px; left: 0px; display: block; width: 100%; height: 100%; }
.form_file_single .form_file_single_upload_button input { position: absolute; top: 0px; right: 0px; display: block;_zoom:30; height: 100%; font-size:300px\9;  opacity: 0; filter: alpha(opacity=0); cursor: pointer;}

